<template>
    <div>
        <van-nav-bar
                title="商品详情"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
                @click-right="1"
        >
            <template #right>
                <van-icon name="setting-o" color="black" size="20" />
            </template>
        </van-nav-bar>
        <van-swipe :autoplay="3000" width="100%" height="200">
            <van-swipe-item v-for="(v, index) in imgarr" :key="index">
                <img :src="'http://172.17.4.241:8887/upload/'+v.imgUrl">
            </van-swipe-item>
        </van-swipe>
        <ul class="abox">
            <li>
                <div class="price"><div>￥{{goodArr[0].goodsPrice}}</div><div>￥{{goodArr[0].goodsMarketPrice}}<div class="row"></div></div></div>
                <div>只剩{{goodArr[0].goodsStock}}件</div>
            </li>
            <li>{{goodArr[0].goodsName}}</li>
            <li><div class="bbox">
                <template v-for="v in goodArr[0].tags">
                <div><van-icon name="hot" color="red" />{{v.tagName}}</div>
                </template>
            </div>
<!--                <div><van-icon name="hot" color="red" />7天无理由退货</div></div>-->
            </li>
        </ul>
        <div>
            <div class="cbox"><div>正在拼团</div><div>查看更多<van-icon name="arrow"  size="16"/></div></div>
            <div class="dbox">
                <van-swipe style="height: 100px;" vertical loop autoplay="3000">
                    <van-swipe-item v-for="item in groupArr">
                        <div class="user" v-for="v in item">
                            <div><img src="'http://172.17.4.241:8887/upload/'+v.userIcon" ><span>{{v.userName}}</span></div>
                            <div><span>正在拼团</span><van-button color="#FF6633" size="mini" @click="fo(0,v.groupId)">去参团</van-button></div>
                        </div>
                    </van-swipe-item>
                    <template #indicator>
                        <div class="custom-indicator"></div>
                    </template>
                </van-swipe>
            </div>
        </div>
        <div>
            <div class="cbox"><div>宝贝评价</div><div>查看全部<van-icon name="arrow"  size="16"/></div></div>
            <div>
                <ul class="ebox">
                    <li>
                        <div><img :src="'http://172.17.4.241:8887/upload/'+commentArr[0].userIcon" alt=""><span>{{commentArr[0].userName}}</span></div>
                        <div>{{commentArr[0].commentContent}}</div>
                    </li>

                </ul>
            </div>
        </div>
        <div class="goodsDetail">
            <div class="cbox">
                <div>商品详情</div>
            </div>
            <div>
                <img :src="'http://172.17.4.241:8887/upload/'+goodArr[0].goodsImg" alt=""
                     style="width: 100%;max-height:100% ">
            </div>
            <div>
                <span>{{goodArr[0].goodsDesc}}</span>
            </div>
        </div>
        <div class="likeGoods">
           <div class="cbox">相识商品</div>
                <div class="content">
                    <div v-for="v in likeGoods">
                        <div>
                            <van-image
                                    width="150"
                                    height="145"
                                    lazy-load
                                    :src="'http://172.17.4.241:8887/upload/'+v.goodsImg"
                            />
                        </div>
                        <div>
                            <div>{{v.goodsName}}</div>
                            <div>
                                <div>￥<span>{{v.goodsPrice}}</span></div>
                                <div>已拼 <span>{{v.goodsVirtualSale}}</span>件</div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" @click="kefu" />
            <van-goods-action-icon icon="star" text="已收藏" :color="color"  @click="shouchang" />
            <van-goods-action-button type="warning" @click="fo(1)" text="单独购买"  />
            <van-goods-action-button type="danger" text="3人拼团"  @click="fo(0)" />
        </van-goods-action>
        <!--弹框-->
        <div>
            <!-- 基础用法 -->
            <div class="sku-container">
                <van-sku
                        v-model="showBase"
                        :sku="skuData.sku"
                        :goods="skuData.goods_info"
                        :goods-id="skuData.goods_id"
                        :hide-stock="skuData.sku.hide_stock"
                        :quota="skuData.quota"
                        :quota-used="skuData.quota_used"
                        :initial-sku="initialSku"
                   reset-stepper-on-hide
                reset-selected-sku-on-hide
                disable-stepper-input
                :close-on-click-overlay="closeOnClickOverlay"
                :custom-sku-validator="customSkuValidator"
                @buy-clicked="onBuyClicked"
                >
                    <template #sku-actions="props">
                        <div class="van-sku-actions">
                            <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
                            <van-button
                                    square
                                    size="large"
                                    type="danger"
                                    @click="props.skuEventBus.$emit('sku:buy')"
                            >
                                立即购买
                            </van-button>
                        </div>
                    </template>
                </van-sku>
            </div>
            </div>

        </div>
</template>

<script>
    import Vue from 'vue';
    import {Lazyload, Toast} from 'vant';
    Vue.use(Lazyload);
     import skuData from './data';
    export default {
        name: "shopList",
        data() {
            return {
                images: [
                    'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/9c8e4afbe8174349ad8bf3a0d4cac457.jpg!sswm',
                    'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/2eccf42e29594ebf9e94021477db8ef9.png!sswm',
                    'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/36912be95c1a400c8fbea09ca6512aca.jpeg!sswm',
                    'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/a5fdc384944b4cf6aa6e4ac9af813ff2.png!sswm',
                ],
                skuData:skuData,
                showBase: false,
                showCustom: false,
                showStepper: false,
                showSoldout: false,
                closeOnClickOverlay: true,
                // initialSku: {
                //     s1: '30349',
                //     s2: '1193',
                //     selectedNum: 3
                // },
                customSkuValidator: () => '请选择xxx!',
                imgarr:[],
                groupArr:[],
                goodArr:[],
                commentArr:[],
                likeGoods:[],
                color:'',
                // sku: {
                //     // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                //     // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                //     tree: [
                //         {
                //             k: '尺寸',
                //             k_id: '1',
                //             v: [
                //                 // {
                //                 //     id: '30349',
                //                 //     name: '天蓝色',
                //                 //     imgUrl:
                //                 //         'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
                //                 // },
                //                 // {
                //                 //     id: '1215',
                //                 //     name: '白色'
                //                 // }
                //             ],
                //             k_s: 's1',
                //             count: 2
                //         },
                //         // {
                //         //     k: '尺寸',
                //         //     k_id: '2',
                //         //     v: [
                //         //         {
                //         //             id: '1193',
                //         //             name: '1'
                //         //         },
                //         //         {
                //         //             id: '1194',
                //         //             name: '2'
                //         //         }
                //         //     ],
                //         //     k_s: 's2',
                //         //     count: 2
                //         // }
                //     ],
                //     // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
                //     list: [
                //         // {
                //         //     id: 2259,
                //         //     price: 120, //价格
                //         //     discount: 122,
                //         //     s1: '1215',
                //         //     s2: '1193',
                //         //     s3: '0',
                //         //     s4: '0',
                //         //     s5: '0',
                //         //     stock_num: 20, //库存
                //         //     goods_id: 946755
                //         // },
                //         // {
                //         //     id: 2260,
                //         //     price: 110,
                //         //     discount: 112,
                //         //     s1: '1215',
                //         //     s2: '1194',
                //         //     s3: '0',
                //         //     s4: '0',
                //         //     s5: '0',
                //         //     stock_num: 2, //库存
                //         //     goods_id: 946755
                //         // },
                //         // {
                //         //     id: 2257,
                //         //     price: 130,
                //         //     discount: 132,
                //         //     s1: '30349',
                //         //     s2: '1193',
                //         //     s3: '0',
                //         //     s4: '0',
                //         //     s5: '0',
                //         //     stock_num: 40, //库存
                //         //     goods_id: 946755
                //         // },
                //         // {
                //         //     id: 2258,
                //         //     price: 100,
                //         //     discount: 100,
                //         //     s1: '30349',
                //         //     s2: '1194',
                //         //     s3: '0',
                //         //     s4: '0',
                //         //     s5: '0',
                //         //     stock_num: 50, //库存
                //         //     goods_id: 946755
                //         // }
                //     ],
                //     price: '5.00',
                //     stock_num: 227, // 商品总库存
                //     none_sku: false,  // 是否无规格商品
                //     hide_stock: false  // 是否隐藏剩余库存
                // },
                goods_id: '946755',
                quota: 1, //限购数量
                quota_used: 0,  //已经购买过的数量
                goods_info: {
                    title: '测试商品A',
                    picture:
                        'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'
                },
                initialSku:{
                    s1: "0001",
                    // s2: "1001",
                    selectedNum: 3
                },
                paraArr: {buyState: '',groupId:''},
                dex:0,
                der:0,
            };

        },
        methods: {
            onClickLeft() {
                Toast('返回');
                this.$router.go(-1);
            },
            shouchang(){
                if (true){
                    if (this.color==''){
                        this.color='#ff5000'
                        Toast('已收藏');
                        this.$axios.post('/api/collection/addgoodsId='+this.goodsId+'&userId='+sessionStorage.getItem('isLogin')).then(res=>{
                            console.log(res)
                        })
                    }else if (this.color=='#ff5000'){
                        this.color=''
                        Toast('已取消收藏');
                        this.$axios.post('/api/collection/cancel='+this.goodsId+'&userId='+sessionStorage.getItem('isLogin')).then(res=>{
                            console.log(res)
                        })
                    }

                }else {
                    Toast.fail('亲还没有登录哟！请登录');
                    this.$router.push('/my')
                }
            },
            kefu(){
              this.$router.push('/message')
            },
            fo(i,groupId){

                if (sessionStorage.getItem('isLogin')){
                    this.showBase=!this.showBase
                    //console.log(i,groupId)
                    this.paraArr.buyState=i
                    this.paraArr.groupId=groupId


                    if (this.paraArr.buyState==0) {
                        if (this.dex==0) {
                            this.skuData.sku.list.forEach(item => {
                                item.price= item.price * 0.9

                            })
                        }
                        this.dex++
                        this.der=0
                    }else if (this.paraArr.buyState==1){
                        if(this.der==0) {
                            this.skuData.sku.list.forEach(item => {

                                item.price=item.price/0.9

                            })
                        }
                        this.der++
                        this.dex=0

                    }

                    console.log(this.dex)
                }else {
                    Toast.fail('亲还没有登录哟！请登录');
                    this.$router.push('/my')

                }


            },
            //分割字符串
            splitArr (data , senArrLen){
                //处理成len个一组的数据
                let data_len = data.length;
                let arrOuter_len = data_len % senArrLen === 0 ? data_len / senArrLen : parseInt((data_len / senArrLen)+'') + 1;
                let arrSec_len = data_len > senArrLen ? senArrLen : data_len;//内层数组的长度
                let arrOuter = new Array(arrOuter_len);//最外层数组
                let arrOuter_index = 0;//外层数组的子元素下标
                // console.log(data_len % len);
                for (let i = 0; i < data_len; i++) {
                    if (i % senArrLen === 0){
                        arrOuter_index++;
                        let len = arrSec_len * arrOuter_index;
                        //将内层数组的长度最小取决于数据长度对len取余，平时最内层由下面赋值决定
                        arrOuter[arrOuter_index-1] = new  Array(data_len % senArrLen);
                        if(arrOuter_index === arrOuter_len)//最后一组
                            data_len % senArrLen === 0 ?
                                len = data_len % senArrLen + senArrLen * arrOuter_index :
                                len = data_len % senArrLen + senArrLen * (arrOuter_index - 1);
                        let arrSec_index = 0;//第二层数组的索引
                        for (let k = i; k < len; k++) {//第一层数组的开始取决于第二层数组长度*当前第一层的索引
                            arrOuter[arrOuter_index-1][arrSec_index] = data[k];
                            arrSec_index++;
                        }
                    }
                }
                return(arrOuter);
            },

            onBuyClicked(data) {
                //this.$toast('buy:' + JSON.stringify(data));
                //console.log(JSON.stringify(data))

                var obj={}
                 obj.goodsId=data.goodsId
                 obj.selectedNum=data.selectedNum
                 obj.goodsFormatId=data.selectedSkuComb.id
                 obj.goodsFormatPrice=data.selectedSkuComb.price/100
                 //console.log(obj)
                this.$store.dispatch('setBuyFormat',obj)
                //console.log(this.paraArr.groupId)
                this.$router.push('/confimOrder?buyState='+this.paraArr.buyState+'&groupId='+this.paraArr.groupId)
            },

            // onAddCartClicked(data) {
            //     this.$toast('add cart:' + JSON.stringify(data));
            // },

        },
        computed:{
            goodId(){
               return this.$store.state.goodsId;
            }
        },
        mounted() {

            var goodsid=this.goodId
            console.log('这是商品id'+goodsid)
            var userId=4
            this.$axios.post('/api/marketGoods/goodsDetail?goodsId='+goodsid).then(res=>{
                console.log(res.data.data)
                this.goodArr=[res.data.data.goodsInfo]  //商品数组
                this.imgarr=this.goodArr[0].imgs
                /*=======拼团=========*/
                var arr=[]
                arr=res.data.data.groupList
                arr.forEach((item,index)=>{
                     arr[index].userIcon=item.leaderUser.userIcon
                     arr[index].userName=item.leaderUser.userName
                })

                this.groupArr=this.splitArr(arr,2)
              // console.log(this.groupArr)
               /*========评价==============*/
                this.commentArr=res.data.data.commentList
                /*=============相似商品==============*/
                this.likeGoods=res.data.data.heatGoodsList
                /*=============规格==================*/
                //this.sku.tree.v
                // console.log(this.goodArr[0])
                //console.log(this.skuData.sku.tree[0].k)
                var v= {}
                var h={}
                this.skuData.sku.tree[0].v=[]
                this.skuData.sku.list=[]
                this.goodArr[0].goodsFormatList.forEach((item,index)=>{
                    //this.skuData.sku.tree[0].v[index].push(item)
                    v={}
                    h={}
                    v.id=item.goodsFormatId
                    v.name=item.goodsFormatName
                    this.skuData.sku.tree[0].v.push(v)
                    h.id=item.goodsFormatId
                    //console.log(this.paraArr.buyState)
                    h.price = item.goodsFormatPrice * 100
                    h.s1 = item.goodsFormatId
                    h.stock_num=item.goodsFormatStock
                    h.goodsId==this.goodArr[0].goodsId
                    this.skuData.sku.tree.count=index
                    this.skuData.sku.list.push(h)
                    // this.p.push(h)
                })
                //console.log(this.skuData.sku)
                this.skuData.sku.price = this.goodArr[0].goodsPrice
                this.skuData.sku.stock_num = this.goodArr[0].goodsStock
                this.skuData.goods_id = this.goodArr[0].goodsId
                this.skuData.quota = this.goodArr[0].goodsLimitBuy
                this.skuData.goods_info.title = this.goodArr[0].goodsName
                this.skuData.goods_info.picture = "http://172.17.4.241:8887/upload/" + this.goodArr[0].goodsImg
            })
            if (sessionStorage.getItem('isLogin')){
                 this.$axios.post('/api/collection/list?userId='+userId).then(res=>{
                     //console.log(res.data.data)
                     res.data.data.forEach(item=>{
                        // console.log(item.goodsId)
                         if (goodsid==item.goodsId){
                             this.color='#ff5000'
                         }
                     })
                 })
            }
        }
    }
</script>

<style scoped>
    .abox li{
        display: flex;
        justify-content: space-between;
        padding:2px 10px 2px 10px;
    }
    .abox li:first-child>div:first-child{
        display: flex;
        align-items: center;
    }
    .abox li:first-child>div:first-child>div:first-child{
        font-weight: bold;
        font-size: 20px;
        color: orangered;
    }
    .abox li:first-child>div:first-child>div:nth-child(2){
        font-size: 18px;
        font-weight: bold;
        color: #a19e9e;
        margin-left: 5px;
        position: relative;
    }
    .row{
        width: 50px;
        height: 2px;
        position: absolute;
        background-color: gray;
        top: 50%;
    }
    .abox li:nth-child(2){
        font-weight: bold;
        text-align: left;
    }
    .bbox{
        display: flex;
        flex-wrap: wrap;
    }
    .bbox>div{
        margin-left: 5px;
        color: gray;
        font-size: 14px;
    }
    .bbox>div:first-child{
        margin-left: 0;
    }
    .dbox>div:first-child{
        font-size: 12px;
        line-height: 20px;
        font-weight: bold;
    }
    .price{
        display: flex;
        justify-content: space-between;
        padding: 0px 10px 0px 10px;
        margin-top: 10px;
        align-items: center;
    }
    .cbox{
        display: flex;
        justify-content: space-between;
        padding: 0px 10px 0px 10px;
        margin-top: 10px;
        align-items: center;
        border-left:5px solid #FF6633 ;
    }
    .cbox>div:first-child{
        font-weight: bold;
    }
    .cbox>div:nth-child(2){
        color: #a19e9e;
        font-size: 14px;
        display: flex;
        align-items: center;
    }
    .dbox{
        height: 100px;
        margin-top: 20px;
    }
    .ebox>li{
        height: 60px;
        overflow: hidden;
        margin-top: 10px;
    }
    .user{
        height: 30px;
        display: flex;
        justify-content: space-between;
        padding: 5px 15px 5px 15px;
        align-items: center;
        background-color: #FFF3EF;
        margin-bottom: 10px;
    }
    .user img{
        width: 22px;
        height: 22px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .user>div{
        display: flex;
        align-items: center;
    }
    .user span{
        font-weight: bold;
    }
    .user>div button{
        margin-left: 10px;
    }
    .ebox>li>div:first-child>img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .ebox>li>div:first-child{
        display: flex;
        align-items: center;
        font-weight: bold;
    }
    .ebox>li>div:first-child>span{
        font-size: 14px;
    }
    .ebox>li>div:last-child{
        font-size: 12px;
        color: gray;
    }
    .goodsDetail{
        height: 100%;
    }
    .goodsDetail span{
        font-size: 12px;
        color: rgba(45, 45, 45, 0.99);
    }
    /*相似商品*/
    .content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-bottom: 50px;
    }
    .content>div{
        width: 170px;
    }
    .content>img{
        margin: 0 10px;
        width: 50%;
        height: 50%;
    }
    .content>div>div:nth-child(2)>div:nth-child(1){
        margin-left: 10px;
    }
    .content>div>div:nth-child(2)>div:nth-child(2){
        display: flex;
        justify-content: space-between;
        margin: 0 10px;
    }
    .content>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1){
        color: #FF6633;
    }
    .content>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2){
        color: #CCCCCC;
        font-size: 13px;
    }
    .content>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span{
        color: #FF6633;
    }

</style>